JS面试题三

HTML

  1. 页面导入样式时，使用link和@import有什么区别？

答：

1
2
3
4
5
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

  1. 简述一下你对HTML语义化的理解？

答：

1
2
3
4
5
1. 用正确的标签做正确的事情。
2. html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
3. 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
4. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
5. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

  1. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

答：

1
2
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

  1. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

答：

1
2
3
4
5
6
7
8
9
10
11
12
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
  	cookie数据大小不能超过4k。
  	sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
  	localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  	sessionStorage  数据在当前浏览器窗口关闭后自动删除。
  	cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

  1. iframe有那些缺点？

答：

1
2
3
4
5
6
*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题。

  1. Label的作用是什么？是怎么用的？

答：

1
2
3
4
5
6
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

  1. 如何在页面上实现一个圆形的可点击区域？

答：

1
2
3
1、map + area 或者 svg
2、border-radius
3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

  1. 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

答：

1
<div style="height:1px;overflow:hidden;background:red"></div>

CSS

  1. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

答：

1
2
3
（1）有两种： IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;

  1. CSS选择符有哪些？哪些属性可以继承？

答：

1
2
3
4
5
6
7
8
9
10
11
12
13
1. id选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = "external"]）
9. 伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color text-indent text-align line-height visibility cursor
不可继承的样式：border padding margin width height display vertical-align text-shadow background float overflow z-index

  1. 如何居中div？

答：

  • 水平居中：给div设置一个宽度，然后添加margin:0 auto属性

    1
    2
    3
    4
    div {
     	width:200px;
     	margin:0 auto;
    }

  • 让绝对定位的div居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    div {
     	position: absolute;
     	width: 300px;
     	height: 300px;
     	margin: auto;
     	top: 0;
     	left: 0;
     	bottom: 0;
     	right: 0;
     	background-color: pink;	/* 方便看效果 */
    }

  • 水平垂直居中(一)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    确定容器的宽高 宽500 高 300 的层
    设置层的外边距
    div {
    	position: relative;		/* 相对定位或绝对定位均可 */
    	width:500px;
    	height:300px;
    	top: 50%;
    	left: 50%;
    	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
    	background-color: pink;	 	/* 方便看效果 */
     }

  • 水平垂直居中(二)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    未知容器的宽高，利用 `transform` 属性
    div {
    	position: absolute;		/* 相对定位或绝对定位均可 */
    	width:500px;
    	height:300px;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	background-color: pink;	 	/* 方便看效果 */
    }

  • 水平垂直居中(三)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    利用 flex 布局
    实际使用时应考虑兼容性
    .container {
    	display: flex;
    	align-items: center; 		/* 垂直居中 */
    	justify-content: center;	/* 水平居中 */
    }
    .container div {
    	width: 100px;
    	height: 100px;
    	background-color: pink;		/* 方便看效果 */
    }
  1. position的值relative和absolute定位原点是？

答：

1
2
3
4
5
6
7
8
9
10
 absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
 fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
 relative
生成相对定位的元素，相对于其正常位置进行定位。
 static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
 inherit
规定从父元素继承 position 属性的值。

  1. CSS3有哪些新特性？

答：

1
新增各种CSS选择器/圆角/阴影/文字特效/线性渐变/旋转/缩放/倾斜/动画等

  1. 用纯CSS创建一个三角形的原理是什么？

答：

1
2
3
4
5
6
7
8
把上、左、右三条边隐藏掉（颜色设为 transparent）
.demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

  1. 一个满屏’品’字布局 如何设计?

答：

1
2
3
4
5
简单的方式：
	上面的div宽100%，
	下面的两个div分别宽50%，
	然后用float或者inline使其不换行即可

  1. 请解释一下为什么需要清除浮动？清除浮动的方式

答：

1
2
3
4
5
6
7
8
9
10
11
12
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
1. 父级div定义 height 
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
2. 结尾处加空div标签 clear:both 
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好(增加无语义标签)
3. 父级div定义 伪类:after 和 zoom 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
缺点： 代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持
4. 父级div定义 overflow:hidden 
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
  1. 什么是外边距合并？

答： 

1
2
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  1. 如何修改chrome记住密码后自动填充表单的黄色背景 ？

答：

1
2
3
4
5
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
  }
  1. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

答：

1
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

  1. display:inline-block 什么时候会显示间隙？(携程)

答：

1
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

  1. 什么是CSS 预处理器 / 后处理器？

答：

1
2
3
4
5
- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
    还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的
    是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

本文标题:JS面试题三

文章作者:Lucien

发布时间:2018-02-22, 17:00:19

最后更新:2018-02-22, 17:01:19

原始链接:https://github.com/jialuchun/blog/2018/02/22/20180222 JS面试题三/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. HTML
  2. 2. CSS
|